<template>
	<view class="user-area">
		<view class="header-area padding-lr-sm" :style="{ 'padding-top': `${paddingTop}px` }">
			<view class="dflex-b">
				<view class="member-area padding-top-sm margin-bottom dflex pos-r"
					@click="to('/sub-user/pages/setting/personal')">
					<view>
						<image class="headimg border-radius-c"
							:src="member.member_headimg || '/static/images/user/default.png'"></image>
					</view>
					<view class="margin-left-sm">
						<view class="info-box">
							<text v-if="islogin"
								class="fs-lg">{{ member.member_name || member.member_nickname || config.appabbr }}</text>
							<text v-else class="fs-lg">去登录</text>
						</view>
						<view v-if="member.slogan"><text class="fs-xxs">11{{ member.slogan }}</text></view>
						<view v-else-if="member.member_city"><text class="fs-xxs">{{ member.member_city }}</text></view>
					</view>
					<view v-if="member.market_level_name" @click.stop="to('/sub-user/pages/integral/sign')">
						<view class="iconfont" style="background: red;color: white;padding: 2rpx;margin-left: 2rpx;">
							{{member.market_level_name}}
						</view>
					</view>
					<use-rate class="line-height-1" icon-size="fs" value="0" disabled>
					</use-rate>
					<view v-if="islogin && is_mp" class="padding" @click.stop="updateMember">
						<view :class="{ 'rotate': isreq }" class="animated iconfont">&#xe6ff;</view>
					</view>
				</view>
				<view class="border-radius-big bg-base dflex-c padding-lr margin-right"
					@click="to('/sub-user/pages/integral/sign')">
					<view class="iconfont fs-xl iconqiandao margin-right-xs"></view>
					<view>{{ signed ? '已签到' : '签到' }}</view>
				</view>
			</view>
		</view>
		<view class="padding-lr-sm" v-if="rankingList&&rankingList.length>0"
			@click="to('/sub-user/pages/ranking/ranking')">
			<view class="vip-card-area pos-r padding use-hover" style="border-radius: 15rpx;">
				<view><text>业绩TOP榜</text></view>
				<view class="flex text-left margin-top" style="line-height: 40rpx;" v-for="(item, index) in rankingList"
					:key="index">
					<view class="flex-sub" style="padding-left: 5rpx;">
						<text>
							{{item.name}}</text>
					</view>
					<view class="flex-sub text-right " style="padding-right:5rpx">
						<text>
							{{item.sum}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="padding-lr-sm" v-if="messageList&&messageList.length>0">
			<view class="bg-white padding bg-white" style="border-radius: 15rpx;">
				<view><text>最新消息</text></view>
				<view class="flex text-left margin-top" style="line-height: 40rpx;" v-for="(item, index) in messageList"
					:key="index">
					<view style="padding: 5rpx;">
						<image style="width: 30rpx;height: 30rpx;" :src="item.img"></image>
					</view>
					<view class="flex-sub" style="padding-left: 5rpx;">
						<text>
							{{item.title}}</text>
					</view>
					<view class="flex-sub text-right " style="padding-right:5rpx">
						<text>{{$moment(item.create_time).format('MM:DD')}}</text>
					</view>
				</view>
			</view>
		</view> -->

		<view class="container-area padding-lr-sm padding-bottom-sm">
			<!-- 我的订单 -->
			<view class="border-radius margin-top-sm bg-main">
				<use-list-title title="我的订单" iconfont="icondingdan" color="#ff6a6c" fwt="600" tip="查看全部订单"
					@goto="toOrder('/sub-user/pages/order/order', '全部')"></use-list-title>

				<view class="order-area padding-bottom-sm padding-lr dflex-c">
					<view class="item dflex dflex-flow-c" @click="toOrder('/sub-user/pages/order/order', '待付款')">
						<view class="iconfont">&#xe6da;<view class="badge badge-small"
								v-if="stats && stats.order_state && stats.order_state['待付款'] > 0">
								{{stats.order_state['待付款']}}
							</view>
						</view>
						<text>待付款</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="toOrder('/sub-user/pages/order/order', '待发货')">
						<view class="iconfont">&#xe6d7;<view class="badge badge-small"
								v-if="stats && stats.order_state && stats.order_state['待发货'] > 0">
								{{stats.order_state['待发货']}}
							</view>
						</view>
						<text>待发货</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="toOrder('/sub-user/pages/order/order', '待收货')">
						<view class="iconfont">&#xe622;<view class="badge badge-small"
								v-if="stats && stats.order_state && stats.order_state['待收货'] > 0">
								{{stats.order_state['待收货']}}
							</view>
						</view>
						<text>待收货</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="toOrder('/sub-user/pages/order/order', '售后中')">
						<view class="iconfont">&#xe715;<view class="badge badge-small"
								v-if="stats && stats.order_state && stats.order_state['售后中'] > 0">
								{{stats.order_state['售后中']}}
							</view>
						</view>
						<text>售后</text>
					</view>
				</view>
			</view>
		</view>
		<view class="padding-lr-sm" v-if="noticeList&&noticeList.length>0">
			<view class="bg-white padding-sm bg-white" style="border-radius: 15rpx;">
				<view><text>通知公告</text></view>
				<view class="flex text-left margin-top" style="line-height: 40rpx;" v-for="(item, index) in noticeList"
					:key="index">
					<view style="padding: 5rpx;">
						<image style="width: 30rpx;height: 30rpx;" :src="item.img"></image>
					</view>
					<view class="flex-sub" style="padding-left: 5rpx;">
						<text>
							{{item.title}}</text>
					</view>
					<view class="flex-sub text-right " style="padding-right:5rpx">
						<text>{{$moment(item.create_time).format('MM:DD')}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="container-area padding-lr-sm padding-bottom-sm">
			<view class="border-radius margin-top-sm bg-main">
				<view class=" data-area padding-lr-sm ">
					<view class="dflex-a w-full padding-top">
						<view class="stats dflex-c dflex-flow-c"
							@click="to('/sub-user/pages/cloudWarehouse/cloudWarehouse')">
							<text class=" fs-xl">{{stats.cloud}}</text>
							<view class="ft-main fs-xs">
								我的云仓
							</view>
						</view>
						<view class="stats dflex-c dflex-flow-c"
							@click="to('/sub-user/pages/localWarehouse/localWarehouse')">
							<text class=" fs-xl">{{stats.local}}</text>
							<view class="ft-main fs-xs">
								我的本地仓
							</view>
							<view class="vertical-line"></view>
						</view>
					</view>
				</view>
				<view class="mt30 grid text-center col-4 bg-white"
					style="padding: 30rpx 0; border-radius: 15rpx;row-gap: 30rpx;">
					<view v-for="(item,index) in categorys" @click="to(item.path)">
						<view class="cell_3_icon flex justify-center align-center">
							<image style="height: 60rpx;width: 60rpx;" :src="item.image"></image>
						</view>
						<view class="text-xs">{{item.category_name}}</view>
					</view>
				</view>
			</view>



			<view class="border-radius margin-top-sm bg-main">
				<use-list-title title="分享" iconfont="iconfenxiaozhongxin-01" color="#ff756e" fwt="600" tip="邀请用户"
					@goto="shareOpen"></use-list-title>
				<!-- 我的足迹 -->
				<use-list-title title="我的足迹" iconfont="iconzuji" color="#ffab6c" fwt="600" :tip="stats.browsing"
					@goto="to('/sub-user/pages/browsing/browsing')"></use-list-title>
				<scroll-view scroll-x class="browsing-area padding-lr">
					<view class="dflex">
						<view v-for="(item, index) in historyDatas" :key="index">
							<image class="border-radius-sm margin-right-sm" @click="togoods(item)" :src="item.img"
								mode="aspectFill"></image>
						</view>
					</view>
				</scroll-view>
				<use-list-title title="售后" iconfont="iconmianxing-05" color="#ff7043" fwt="600"
					@goto="to('/sub-user/pages/order/aftersale/list')"></use-list-title>

				<use-list-title title="我的收藏" iconfont="iconshoucang-" color="#ff6a6c" fwt="600" :tip="stats.collect"
					@goto="to('/sub-user/pages/collect/collect')"></use-list-title>
				<!-- <use-list-title title="我的钱包" iconfont="iconqianbao-01" color="#9776ff" fwt="600" tip="充值、余额、提现"
					@goto="to('/sub-user/pages/wallet/wallet')"></use-list-title> -->

				<!-- <use-list-title title="分销中心" iconfont="iconfenxiaozhongxin-01" color="#ff756e" fwt="600" tip="分享赚钱"
					@goto="to('/sub-user/pages/distribution/distribution')"></use-list-title> -->
					<use-list-title title="关于我们" iconfont="iconchangjianwenti-01" color="#ffab6c" fwt="600"
						@goto="to('/sub-user/pages/setting/about')"></use-list-title>
				<use-list-title title="收货人" iconfont="icondizhi-" color="#5a9ded" fwt="600"
					@goto="to('/sub-user/pages/address/address')"></use-list-title>
				<use-list-title title="联系客服" iconfont="iconchangjianwenti-01" color="#ffab6c" @goto="callPhone"
					fwt="600"></use-list-title>
				<use-list-title title="设置" iconfont="iconshezhi-" color="#58bc8a" fwt="600"
					@goto="to('/sub-user/pages/setting/setting')"></use-list-title>
			</view> 

			<view v-if="islogin" class="border-radius margin-top-sm padding-sm dflex-c bg-main log-out-btn"
				@click="openActionSheet">
				<text class="cell-tit">退出登录</text>
			</view>
			<view v-else class="border-radius margin-top-sm padding-sm dflex-c bg-main log-out-btn"
				@click="to('/pages/login/login')">
				<text class="cell-tit">去登录</text>
			</view>

			<!-- 操作菜单 -->
			<use-action-sheet v-model="actionSheetShow" :list="actionSheetList" :tips="actionSheetTips"
				@click="actionSheetClick" @close="actionSheetClose"></use-action-sheet>
		</view>

		<!-- 薇云购版权 -->
		<use-copyright></use-copyright>

		<!-- 分享 -->
		<use-popup mode="bottom" bgclass=" " v-model="shareShow">
			<view class="share-area margin border-radius bg-main">
				<view class="tac w-full padding-sm">分享</view>
				<view class="padding-lr margin-bottom-xl dflex-b pos-r">
					<!-- #ifdef MP-WEIXIN || APP -->
					<!-- <button class="dflex-c dflex-flow-c no-border btn use-hover" style="color: #07c160"
						open-type="share" @click="toShare(0)">
						<view class="iconfont iconweixin padding-lr-sm border-radius-c fs-xxxl"></view>
						<view class="dflex-c fs-sm ft-dark">微信好友</view>
					</button>
					<view class="vertical-line"></view> -->
					<!-- #endif -->
					<button class="dflex-c dflex-flow-c no-border btn ft-base use-hover" @click="createPoster">
						<view class="iconfont iconhaibao1 padding-lr-sm border-radius-c fs-xxxl"></view>
						<view class="dflex-c fs-sm ft-dark">生成海报</view>
					</button>
				</view>
			</view>
		</use-popup>
		<use-popup mode="bottom" bgclass=" " v-model="posterShow" @close="posterClose()">
			<l-painter css="width: 750rpx; padding-bottom: 100rpx; " @fail="fail" @done="done" pathType="url"
				ref="poster" performance>
				<l-painter-view
					css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #ffffff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
					<l-painter-image src="/static/images/erweima.png"
						css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx;" />
					<l-painter-text
						class="padding:20rpx;font-size:20rpx">{{'邀请码:'+member.my_invitation_code}}</l-painter-text>
				</l-painter-view>
			</l-painter>
			<view class="tac padding-tb-sm bg-base use-hover flex1 border-radius-big" @click="posterSave">保存到相册</view>
		</use-popup>
		<!-- 海报二维码 -->
		<view class="qrcode tac padding-tb pos-f pos-tl-c">
			<use-qrcode :onval="true" :val="posterQRcode" :show="false" loading-text="生成海报中" qrsize="200"
				@result="posterQRcodeResult"></use-qrcode>
		</view>
		<!-- 海报 -->
		<view v-if="posterShow " class="poster pos-f pos-tl-c padding">
			<l-painter custom-style="position: fixed;z-index: -1;top: -200vh;left: -100vw;" :board="posterData"
				@success="posterSuccess" />
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	const _history = 'wmzmall-goods-history'
	import uposter from '@/common/poster.js';
	export default {
		computed: {
			...mapState(['islogin', 'member']),
			paddingTop() {
				let menuButtonInfo = {
					top: 6
				};
				// #ifdef MP-WEIXIN
				menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				console.log('menuButtonInfo', menuButtonInfo);
				// #endif

				// #ifdef H5-WEIXIN
				menuButtonInfo.top = 6;
				// #endif

				return menuButtonInfo.top + 20;
			},
			config() {
				return this.$config;
			}
		},
		data() {
			return {
				invitation_code: "123",
				rankingList: [],
				messageList: [],
				noticeList: [],
				// 分享
				shareShow: false,
				// 海报
				posterQRcode: '',
				posterUrl: '',
				posterShow: false,
				posterData: {},
				isreq: false,
				// 浏览历史
				historyDatas: [],
				// 统计数据
				stats: {},

				actionSheetShow: false,
				actionSheetList: [],
				actionSheetTips: {
					text: "",
					color: "#9a9a9a",
					size: 24
				},

				is_mp: false,
				is_alipay: false,
				signed: false,
				categorys: [{
						"category_name": "渠道采购单",
						"image": "/static/images/caigoudan.png",
						"path": "/sub-user/pages/channel/order"
					},
					{
						"category_name": "提货单",
						"image": "/static/images/tihuodan.png",
						"path": "/sub-user/pages/channel/order_th" 
					},
					{
						"category_name": "渠道管理",
						"image": "/static/images/qudao.png",
						"path": "/sub-user/pages/channel/list"
					},
					{
						"category_name": "申请调货",
						"image": "/static/images/huan.png",
						"path": "/sub-user/pages/transfer/index"
					},
					{
						"category_name": "我要换新",
						"image": "/static/images/huanxin.png",
						"path": ""
					},
					{
						"category_name": "回收变现",
						"image": "/static/images/huishou.png",
						"path": ""
					},
					{
						"category_name": "积分兑换",
						"image": "/static/images/jifen.png",
						"path": "/sub-user/pages/integral/integral"
					},
					{
						"category_name": "优惠券资产",
						"image": "/static/images/youhuiquanzichang.png",
						"path": "/sub-user/pages/coupon/coupon"
					}
				],
			};
		},
		onLoad() {
			this.$nextTick(() => {
				this.is_mp = this.$env.is_mp;
				this.is_app = this.$env.is_app;
				this.is_alipay = this.$env.platform == 'alipay';
			})
		},
		onShow() {
			let _this = this;
			if (!this.islogin) {
				this.stats = {};
				this.historyDatas = [];
				this.logout();

				// this.$api.msg('账号未登录');
				return;
			}

			this.loadData();
		},
		methods: {
			...mapMutations(['logout', 'putMember']),
			// 加载数据
			loadData() {
				uni.getStorage({
					key: this.$config.const.__sign_time,
					success: (res) => {
						this.signed = res.data == this.$api.format(new Date(), 'yyyy-MM-dd');
					}
				})
				this.$func.wmzmall.call('member/data').then(res => {
					if (res.code == 200) {
						this.putMember(res.datas.member);
						this.stats = res.datas.stats;
					 	this.stats.order_state = {};
						this.rankingList = this.stats.rankingList
						this.noticeList = this.stats.noticeList
						this.messageList = this.stats.messageList
						this.stats.order.forEach(_order => {
							this.stats.order_state[_order._id] = _order.num;
						});
					}
				});

				// 浏览历史
				this.$db['wmzmall-goods-history, wmzmall-goods'].collection()
					.where('create_uid == $env.uid')
					.field(
						'visit_cnt, param, last_modify_time, goods._id as goods_id, goods.img as goods_img, goods.state as goods_state'
					)
					.orderBy('last_modify_time desc')
					.get()
					.then(res => {
						if (res && res.result && res.result.code === 0) {
							let _historyDatas = [];
							res.result.data.forEach(x => {
								x._id = x.goods_id[0];
								x.img = x.goods_img[0];
								x.state = x.goods_state[0];
								_historyDatas.push(x);
							});
							this.historyDatas = _historyDatas;
						}
					});
			},

			// 打开操作菜单
			openActionSheet() {
				this.actionSheetShow = true;

				this.$api.timerout(() => {
					this.actionSheetList = [{
						text: "退出登录",
						color: "#333"
					}, {
						text: "切换账号",
						color: "#333"
					}, ];

				}, 0);
			},
			// 关闭操作菜单
			actionSheetClose() {
				console.log(this.actionSheetShow);
			},
			// 点击操作菜单
			actionSheetClick(index) {
				switch (index) {
					case 0:
						this.$api.msg('退出成功');

						this.logout();
						break;
					case 1:
						this.$api.tologin();
						break;
				}
			},

			updateMember() {
				if (this.isreq) return;
				this.isreq = true;
				let _this = this;

				uni.getUserProfile({
					desc: '更新会员信息',
					lang: 'zh_CN',
					success(res) {
						_this.$func.wmzmall.call('member/update', {
							nickname: res.userInfo.nickName,
							gender: res.userInfo.gender,
							avatar: res.userInfo.avatarUrl,
							comment: [res.userInfo.country, res.userInfo.province, res.userInfo.city]
								.filter(x => x).join('-')
						}).then(res => {
							_this.isreq = false;

							if (res.code == 200) {
								_this.loadData();
								return;
							}

							_this.$api.msg(res.msg);
						})
					},
					fail(err) {
						console.log(err);
						_this.isreq = false;
					}
				});
			},
			fail(v) {
				console.log(v)
			},
			done(v) {
				console.log('绘制完成:')
			},
			posterSave() {
				this.$refs.poster.canvasToTempFilePathSync({
					fileType: 'jpg',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath)
						this.picture2 = res.tempFilePath
						this.saveImage()
					},
					fail(e) {
						console.log('???????????', e)
					}
				})
			},
			// 保存图征
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.picture2,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						});
					},
				});
				// #endif
			},

			// 统一跳转接口，拦截未登录路由
			to(url) {
				if (!this.islogin) {
					this.$api.tologin()
					return;
				}
				uni.navigateTo({
					url
				});
			},
			// 跳转到 订单
			async toOrder(url, state) {
				if (!this.islogin) {
					this.$api.tologin()
					return;
				}
				/* let res = await this.$func.wmzmall.call('entitlement/list', {
					skip:0,
					limit:1
				});
				if (res.code === 200) {
					let data=res.datas.data
					if(data.length>0){
						uni.navigateTo({
							url: "/pages/entitlement/order"
						})
						return
					}
				} */

				uni.setStorage({
					key: '__order_state',
					data: state,
					success(res) {
						console.log(res);
					},
					complete() {
						uni.navigateTo({
							url
						});
					}
				});
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '18908896815'
				});
			},

			// 跳转商品详情
			togoods(item) {
				item.param = item.param || {};
				this.$api.togoods({
					id: item._id,

					...item.param
				});
			},
			tovip() {
				// console.log('share_mid', uni.getStorageSync('__use_share_mid'))
				// this.$api.msg('share_mid ' + uni.getStorageSync('__use_share_mid'));

				if (this.member.vip) {
					uni.navigateTo({
						url: `/sub-user/pages/member/member`
					});
					return;
				}

				uni.navigateTo({
					url: `/sub-user/pages/member/member-not`
				});
			},
			// 打开分享
			shareOpen() {
				if (!this.islogin) {
					this.$api.tologin()
					return;
				}

				this.shareShow = true;
			},
			posterClose() {
				this.posterShow = false;
			},
			// 创建海报
			createPoster() {
				this.shareShow = false;
				if (this.posterUrl) {
					this.posterShow = true;
					return;
				}
				uni.showLoading({
					title: '生成海报中'
				});

				this.posterQRcode = 'www.baidu.com'
			},
			// 海报二维码生成成功
			posterQRcodeResult(res) {
				// 获取产品海报数据
				this.posterData = uposter.getMemberData(res);
				this.posterShow = true;
			},
			// 海报生成完成
			posterSuccess(res) {
				this.posterUrl = res;

				console.log(this.posterUrl)
				uni.hideLoading();
			}
		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: $page-color-base;
	}

	.data-area {
		border-top-left-radius: 80rpx;
		border-top-right-radius: 80rpx;
		overflow: hidden;
		top: 300rpx;
		height: calc(100% - 298rpx);
		overflow-y: auto;

		.stats {
			width: 33.33%;
			position: relative;
		}

		.nav {
			width: 44%;
			box-shadow: 0 2rpx 30rpx 5rpx #f5f5f5;
			padding: 50rpx 0 30rpx;
		}

		.item {
			width: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
			margin-bottom: 20rpx;

			.iconfont {
				color: #fff;
				font-size: 50rpx;
			}
		}
	}

	.member-area {
		image {
			width: 130rpx;
			height: 130rpx;
			border: 5rpx solid #fff;
		}
	}

	.vip-card-area {
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		font-size: 24rpx;
		color: #c6b181;
		background-color: #000000;
		/* 不支持线性的时候显示 */
		background-image: linear-gradient(to right, #3a3a3a, #000000);

		.iconfont {
			font-size: 66rpx;
		}
	}

	.stats-area {
		.item {
			padding: 30rpx 0;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 6rpx;
		}
	}

	.order-area {
		.item {}

		.iconfont {
			position: relative;
			font-size: $font-lg + 8upx;

			.badge {
				right: initial;
			}
		}
	}

	.stats-area .item,
	.order-area .item {
		position: relative;
		font-size: $font-sm;
		color: $font-color-base;
		flex: 1;
	}

	.browsing-area {
		image {
			width: 160rpx;
			height: 160rpx;
		}
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	.log-out-btn {
		color: $font-color-base;
	}
</style>